<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2018/7/12
  Time: 17:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="container-fluid">
    <div class="panel">
        <div class="panel-heading">
            <div class="panel-title">默认样式 <code>.steps</code></div>
        </div>
        <div class="panel-body">
            <div class="steps row">
                <div class="step col-lg-3">
                    <span class="step-number">1</span>
                    <div class="step-desc">
                        <span class="step-title">第一步</span>
                        <p>检查环境及常用函数</p>
                    </div>
                </div>
                <div class="step col-lg-3 active">
                    <span class="step-number">2</span>
                    <div class="step-desc">
                        <span class="step-title">第二步</span>
                        <p>填写程序相关信息</p>
                    </div>
                </div>
                <div class="step col-lg-3">
                    <span class="step-number">3</span>
                    <div class="step-desc">
                        <span class="step-title">第三步</span>
                        <p>等待安装</p>
                    </div>
                </div>
                <div class="step col-lg-3">
                    <span class="step-number">4</span>
                    <div class="step-desc">
                        <span class="step-title">第四步</span>
                        <p>完成</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel">
        <div class="panel-heading">
            <div class="panel-title">简化样式 <code>.pearls</code></div>
        </div>
        <div class="panel-body">
            <div class="pearls row">
                <div class="pearl done col-md-3">
                    <span class="pearl-number">1</span>
                    <span class="pearl-title">检查环境</span>
                </div>
                <div class="pearl active col-md-3">
                    <span class="pearl-number">2</span>
                    <span class="pearl-title">填写相关信息</span>
                </div>
                <div class="pearl col-md-3">
                    <span class="pearl-number">3</span>
                    <span class="pearl-title">等待安装</span>
                </div>
                <div class="pearl col-md-3">
                    <span class="pearl-number">4</span>
                    <span class="pearl-title">完成</span>
                </div>
            </div>
        </div>
    </div>
    <div class="panel">
        <div class="panel-heading">
            <div class="panel-title">步骤状态</div>
        </div>
        <div class="panel-body">
            <div class="steps row">
                <div class="step done col-md-4">
                    <span class="step-number">1</span>
                    <div class="step-desc">
                        <span class="step-title">成功</span>
                        <p>加样式 <code>.done</code></p>
                    </div>
                </div>
                <div class="step active col-md-4">
                    <span class="step-number">1</span>
                    <div class="step-desc">
                        <span class="step-title">进行中</span>
                        <p>加样式 <code>.active</code></p>
                    </div>
                </div>
                <div class="step error col-md-4">
                    <span class="step-number">1</span>
                    <div class="step-desc">
                        <span class="step-title">失败</span>
                        <p>加样式 <code>.error</code></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
